<template>
  <div class="Login">
    <div class="Login-form">
      <p>
        <img src="/login/login_1.png" alt="" />
      </p>
      <p>
        <span>客户关系管理系统</span>
      </p>
      <p>
        <span>Customer Relationship Management</span>
      </p>
      <div class="user" @mouseenter="doUserEnter" @mouseleave="doUserLeave">
        <img src="/login/login_2.png" alt="" />
        <input type="text" class="Login-user" @click="doUser" @blur="doUserBlur" placeholder="请输入用户名称"
          v-model="loginForm.username" />
      </div>
      <div class="pass" @mouseenter="doPassEnter" @mouseleave="doPassLeave">
        <img src="/login/login_3.png" alt="" />
        <input type="text" class="Login-pass" @click="doPass" @blur="doPassBlur" placeholder="请输入登陆密码"
          v-model="loginForm.password" />
      </div>
      <div class="Login_btn" @click="LoginGo">
        <span>登陆</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import { Login_Type } from '@/type/login'
import { useCounterStore } from '@/store/ticket'
// import axios from "axios";
// import { getLogins } from '@/api/custom.ts'

const store = useCounterStore()
const router = useRouter();
// 点击登陆时做的事情
let loginForm = reactive<any>({
  username: "",
  password: "",
});
const LoginGo = async () => {
  console.log('dglu')
  // 发送给后端数据进行验证账号密码。
  if (loginForm.username === '') {
    ElMessage.error('请输入用户')
    return
  } else if (loginForm.password === '') {
    ElMessage.error('请输入密码')
    return
  }
  let obj:Login_Type = {
    username: loginForm.username,
    password: loginForm.password
  }
  console.log(obj);
  // const res: any = await getLogin(obj)
  const res = await store.interface_getLogin(obj)
  console.log(res,'我是table')
  // console.log(res);
  if (res.data) {
    const token = localStorage.getItem('token')
    if (!token) {
      localStorage.setItem('token', JSON.stringify(res.data))
    }
    ElMessage({
      message: res.msg,
      type: 'success',
      duration: 1000,
      onClose: () => {
        console.log('关闭了')
        router.push("/home/menu/todo");
      }
    })
    return
  }
  ElMessage.error(`${res.msg}`)
};
// 点击时让提示信息消失
const doUser = (e: any) => {
  e.target.placeholder = "";
};
// 输入框失焦时信息显示
const doUserBlur = (e: any) => {
  e.target.placeholder = "请输入用户名称";
};
// 鼠标滑入时的边框高亮
const doUserEnter = (e: any) => {
  if (e.target.tagName == "DIV") {
    e.target.style.border = "1px solid #0079fe";
  }
};
// 鼠标滑出时的边框高亮
const doUserLeave = (e: any) => {
  if (e.target.tagName == "DIV") {
    e.target.style.border = "1px solid #dedede";
  }
};

////////////////////////////////////////////////////////////

// 点击时让提示信息消失
const doPass = (e: any) => {
  e.target.placeholder = "";
};
// 输入框失焦时信息显示
const doPassBlur = (e: any) => {
  e.target.placeholder = "请输入登陆密码";
};
// 鼠标滑入时的边框高亮
const doPassEnter = (e: any) => {
  if (e.target.tagName == "DIV") {
    e.target.style.border = "1px solid #0079fe";
  }
};
// 鼠标滑出时的边框高亮
const doPassLeave = (e: any) => {
  if (e.target.tagName == "DIV") {
    e.target.style.border = "1px solid #dedede";
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/login/login_4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .Login-form {
    width: 450px;
    height: 500px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    p:nth-child(1) {
      img {
        width: 100px;
        height: 100px;
      }

      margin-top: 40px;
    }

    p:nth-child(2) {
      span {
        font-size: 35px;
        font-weight: 600;
        color: #0079fe;
      }

      margin: 10px 0px;
    }

    p:nth-child(3) {
      span {
        color: #0079fe;
      }

      margin-bottom: 20px;
    }

    .user {
      width: 400px;
      height: 50px;
      border: 1px solid #dedede;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      border-radius: 5px;

      img {
        width: 25px;
        height: 25px;
        margin: 0px 10px;
      }

      input {
        border: 0;
        outline: none;

        &::placeholder {
          color: #d3d3d3;
        }
      }
    }

    .pass {
      width: 400px;
      height: 50px;
      border: 1px solid #dedede;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      border-radius: 5px;

      img {
        width: 25px;
        height: 25px;
        margin: 0px 10px;
      }

      input {
        border: 0;
        outline: none;

        &::placeholder {
          color: #d3d3d3;
        }
      }
    }

    .Login_btn {
      width: 400px;
      height: 50px;
      color: #ffffff;
      text-align: center;
      line-height: 50px;
      background-color: #0079fe;
      border-radius: 5px;
    }
  }
}
</style>
